<script setup>
import { ElForm, ElFormItem, ElInput, ElInputNumber } from 'element-plus';
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({
      name: '',
      age: 0
    })
  },
});
const emit = defineEmits(['updateFormData']);
const updateField = (field, value) => {
  console.log(field, value);
  emit('updateFormData', {
    ...props.formData,
    [field]: value
  });
};
</script>

<template>
  <div>
    <el-form>
      <el-form-item label="姓名">
        <el-input :value="formData.name" @input="updateField('name', $event)" />
      </el-form-item>

      <el-form-item label="年龄">
        <el-input-number :value="formData.age" @input="updateField('age', $event)" />
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>

</style>